<template>
  <ScreenLayoutWithMenu title="销售数据分析大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="月度销售趋势" grid-area="a">
        <ECharts :option="salesOption" />
      </ChartCard>
      <ChartCard title="区域销售分布" grid-area="b">
        <ECharts :option="regionOption" />
      </ChartCard>
      <ChartCard title="核心指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">总销售额</div>
            <div class="kpi-value">¥1,234,567</div>
            <div class="kpi-change positive">↑ 12.5%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">订单数量</div>
            <div class="kpi-value">5,678</div>
            <div class="kpi-change positive">↑ 8.3%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">客单价</div>
            <div class="kpi-value">¥217</div>
            <div class="kpi-change negative">↓ 2.1%</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="产品分类占比" grid-area="d">
        <ECharts :option="productOption" />
      </ChartCard>
      <ChartCard title="实时订单" grid-area="e">
        <div class="order-list">
          <div v-for="item in 6" :key="item" class="order-item">
            <span class="order-id">订单{{ item.toString().padStart(6, '0') }}</span>
            <span class="order-amount">¥{{ Math.floor(Math.random() * 1000) + 100 }}</span>
            <span class="order-status">已完成</span>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="热销商品TOP10" grid-area="f">
        <ECharts :option="topProductsOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const salesOption = ref({})
const regionOption = ref({})
const productOption = ref({})
const topProductsOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  salesOption.value = getLineOption({
    categories: months,
    series: [{
      name: '销售额',
      data: [120, 200, 150, 300, 280, 350]
    }, {
      name: '利润',
      data: [80, 120, 90, 180, 150, 200]
    }]
  })

  regionOption.value = getBarOption({
    categories: ['华东', '华北', '华南', '西南', '西北', '东北'],
    series: [{
      name: '销售额',
      data: generateRandomData(6).data
    }]
  })

  productOption.value = getPieOption({
    name: '产品分类',
    data: [
      { value: 1048, name: '电子产品' },
      { value: 735, name: '服装鞋帽' },
      { value: 580, name: '食品饮料' },
      { value: 484, name: '家居用品' },
      { value: 300, name: '其他' }
    ]
  })

  topProductsOption.value = getBarOption({
    categories: ['商品A', '商品B', '商品C', '商品D', '商品E', '商品F', '商品G', '商品H', '商品I', '商品J'],
    series: [{
      name: '销量',
      data: generateRandomData(10).data.sort((a, b) => b - a)
    }]
  })
})
</script>
